<template>
	<view class="content">
		<view class="cellBox">
			
			
			<view class="loginButtonStyleView" >
				
					
				<view class='leftView'>收货人</view>
			
				<input type="text" class='inputView' placeholder='请填写收货人姓名' v-model="name" focus placeholder-class="inputpalceView"></input>
		
			
			</view>
			
			
			<view class="lineView"></view>
			
			
			<view class="loginButtonStyleView" >
				
					
				<view class='leftView'>手机号</view>
			
			
				<input type="number" class='inputView' placeholder='请填写收货人手机号' v-model="mobile" placeholder-class="inputpalceView"></input>
					
			
			</view>
			
			
			<view class="lineView"></view>
	
			<view class="loginButtonStyleView" >
				
					
				<view class='leftView'>省市区</view>
			
			
				<!-- <input type="number" class='inputView' placeholder='请填写收货人手机号' v-model="mobile" placeholder-class="inputpalceView"></input> -->
					
				<view class='rightView'>
					<input :value="pickerValue" placeholder='请选择省市区'  class='inputView' readonly   @focus="showThreePicker" placeholder-class="inputpalceView"></input>
					<area-picker ref="areaPicker" :areaId="areaId" :defaultIndex="defaultIndex"  @onConfirm="onConfirm" class="fsz26"></area-picker>
				</view>
			
			</view>
			
			
			<view class="lineView"></view>
		
			
			<view class="loginButtonStyleView" >
				
					
				<view class='leftView'>详细地址</view>
			
			
		
				<input type="text" class='inputView' placeholder='请填写收货详细地址' v-model="address" placeholder-class="inputpalceView"></input>
				
			
			
			</view>
			
			<view class="lineView"></view>
				
			
			
			
			<view class="loginButtonStyleView" >
				
					
				<view class='leftView'>设为默认</view>
			
			
				<image src='/static/image/my/boxnormal.png' v-if="checked!=1" class="noselectCheck" @click="defaultChange"></image>
				
				<image src='/static/image/my/boxselect.png' v-if="checked==1" class="noselectCheck" @click="defaultChange"></image>
							
			
			
			</view>
			
	
		</view>
		
		
		<view class="btttonView" @click="saveShip()" >保存</view>
		
		<view class="registButton" v-if="id && id != 0" @click="delShip" >删除</view>
		
		
		

	</view>

</template>

<script>
import areaPicker from "@/components/area-picker/areaPicker.vue";
export default {
	components: {
		areaPicker
	},
	data() {
		return {
			id: 0,
			name: '',
			mobile: '',
			region: ['北京市', '北京市', '东城区'],
			areaId: 110101,
			address: '',
			is_def: 2,
			multiArray: [
				[],
				[],
				[]
			],
			checked: false,
			pickerValue: '',
			defaultIndex: [0, 0, 0],
			submitStatus: false
		}
	},
	computed: {},
	methods: {
		// 省市区联动初始化
		showThreePicker() {
			
			
			
			this.$common.modelShow('信息确认', 1, () => {
			
			})
			
			
			
			this.$refs.areaPicker.showPicker();
		},
		onConfirm(e) {
			
		
			
			let province_name = e[0].name;
			let city_name = e[1].name;
			let county_name = e[2].name;
			this.pickerValue = e[0].name+ " "+ e[1].name+" "+e[2].name
			let data = {
				province_name: province_name,
				city_name: city_name,
				county_name: county_name
			}
			let regionName = [province_name, city_name, county_name];
			this.$api.getAreaId(data, res => {
				if (res.status) {
					this.areaId = res.data
				} else {
					uni.showModal({
						title: '提示',
						content: '地区选择出现问题，请重新选择地区',
						showCancel: false
					});
				}
			});
		},
		// 信息验证
		checkData (data) {
			this.submitStatus = false;
			if (!data.name) {
				this.$common.errorToShow('请输入收货人姓名')
				return false
			} else if (!data.mobile) {
				this.$common.errorToShow('请输入收货人手机号')
				return false
			} else if (data.mobile.length !== 11) {
				this.$common.errorToShow('收货人手机号格式不正确')
				return false
			} else if (!data.area_id) {
				this.$common.errorToShow('请选择地区信息')
				return false
			} else if (!data.address) {
				this.$common.errorToShow('请输入收货地址详细信息')
				return false
			} else {
				return true
			}
		},
		//默认
		defaultChange(){
			if(this.checked){
				this.checked = false;
				this.is_def = 2;
			}else{
				this.checked = true;
				this.is_def = 1;
			}
		},
		//编辑获取收货地址信息
		getShipInfo() {
			let data = {
				'id': this.id
			}
			this.$api.shipDetail(data, res => {
				if(res.status){
					let region = res.data.area_name.split(" ");
					this.name = res.data.name;
					this.mobile = res.data.mobile;
					this.region = region;
					this.areaId = res.data.area_id;
					
					this.pickerValue = this.region[0]+ " "+ this.region[1]+" "+this.region[2]
					this.$refs.areaPicker.init();//初始化插件
					
					this.address = res.data.address;
					this.is_def = res.data.is_def;
					if(res.data.is_def == 1){
						this.checked = true;
					}else{
						this.checked = false;
					}
				}else{
					this.$common.errorToShow('获取收货地址信息出现问题');
					// this.submitStatus = false;
				}
			},res => {
				this.submitStatus = false;
			});
		},
		//删除地址
		delShip() {
			this.submitStatus = true;
			this.$api.removeShip({'id': this.id}, res => {
				if(res.status){
			
					let user_ship = this.$store.state.userShip;
					
					if(user_ship.id==this.id){
						let data={}
						this.$store.commit("userShip",data)
					}
					
					this.$common.successToShow(res.msg, ress => {
						// this.submitStatus = false;
						uni.navigateBack({
							delta: 1
						});
					});
				}else{
					this.$common.errorToShow(res.msg);
					// this.submitStatus = false;
				}
			},res => {
				this.submitStatus = false;
			});
		},
		//存储收货地址
		saveShip() {
			this.submitStatus = true;
			let data = {
				name: this.name,
				address: this.address,
				mobile: this.mobile,
				is_def: this.is_def,
				area_id: this.areaId
			}
			
			if(this.id && this.id != 0){
				//编辑存储
				data.id = this.id
				
				if (this.checkData(data)) {
					this.$api.editShip(data, res => {
						if(res.status){
							this.$common.successToShow(res.msg, ress => {
								// this.submitStatus = false;
								uni.navigateBack({
									delta: 1
								});
							});
						}else{
							this.$common.errorToShow(res.msg);
							// this.submitStatus = false;
						}
					},res => {
						this.submitStatus = false;
					});
				}
			}else{
				//添加
				if (this.checkData(data)) {
					this.$api.editShip(data, res => {
						if(res.status){
							this.$common.successToShow(res.msg, ress => {
								// this.submitStatus = false;
								uni.navigateBack({
									delta: 1
								});
							});
						}else{
							this.$common.errorToShow(res.msg);
							// this.submitStatus = false;
						}
					},res => {
						this.submitStatus = false;
					});
				}
			}
		}
	},
	onLoad(e) {
		if(e.ship_id){
			//编辑
			this.id = e.ship_id;
			this.getShipInfo();
		}else{
			//添加
		uni.setNavigationBarTitle({
				title: '添加地址'
			});
		}
		//没有地区信息时，再拉一次
		if(!this.$db.get('areaList')){
			//获取地区信息
			this.$api.getAreaList({}, res => {
				if (res.status) {
					this.$db.set('areaList', res.data)
				}
			});
		}
	},
	onBackPress() {
		if (this.$refs.areaPicker.pickerShow) {
			this.$refs.areaPicker.closePicker();
			return true;
		}
	},

}
</script>

<style>
	
page{
	
	background-color: #F6F6F6;
	
}

	.cellBox{
		
		// position: relative;
		
		width: 678upx;
		
		margin-left: 36upx;
		
		margin-top: 36upx;
		
		margin-right: 36upx;
		
		// height: 300upx;
		
		border-radius: 10upx;
		
		margin-top: 36upx;
		background: white;
		z-index: 999;
	}
	
	
	.loginButtonStyleView{
		
	
		
		width: 100%;
		
		height: 104upx;
		

		

		display: flex;
			
		flex-direction: row;
		
		align-items: center;
		
		justify-content: space-between;
		
		
		/* background-color: #007AFF; */
		
	}
	
	
	.inputView{
		
		width: 400upx;
		
		margin-right: 27upx;
		
		height: 100%;
		
		font-size: 28upx;
		
		text-align: right;
		
		// background-color: #0D9E13;
		
		// float: left;
		
	}
	
	
	
	
	.inputpalceView{
		
		font-size: 28upx;
			
		color: #FF5A5F;
		
	}
	
	
.leftView{
	
	font-size: 32upx;
	
	margin-left: 30upx;
	
	
}


.lineView{
	
	background-color: #eeeeee;
	
	width: 100%;
	
	height: 1upx;
	
	
}

.rightView{
	
	/* background-color: #007AFF; */
	
}
	

	.noselectCheck{
		
		
		margin-right:118upx;
		
		width: 40upx;
		
		/* background: url('/pages/static/image/my/boxselect.png'); */
		
		height: 40upx;
		
		/* background-color: #F0AD4E; */
		
	}
	
	.btttonView{
		
	margin-top: 185upx;
	
	margin-left: 36upx;
	
	text-align: center;
	
	width: 678upx;
	
	height: 90upx;
	
	// margin-left: 36upx;
	
	font-size: 36upx;
	
	color: #FFFFFF;
	
	line-height: 90upx;
	
	// border-radius: 45upx;
	
	
	background-color: #FF5A5F;
	
	
	box-shadow:   0px 3upx 7upx rgba(0,0,0,0.06),  0upx 2upx 4upx rgba(0,0,0,0.03),0upx 1upx 2upx rgba(0,0,0,0.03);
	
		
	   
	
	}
	
	
	.registButton{
		
	
		
		margin-top: 50upx;
		
		
		text-align: center;
		
	width: 678upx;
	
	height: 90upx;
		
		margin-left: 36upx;
		
		font-size: 30upx;
		
		color: #FF5A5F;
		
		line-height: 90upx;
		
		border-radius: 5upx;
		
		border-width: 2upx;
		
		border-color: #FF5A5F;
		
		border-style: solid;
		
		
		// background-color: #5565FB;
		
	}
	
</style>